<template>
  <div class="h-left h-l-first">
        <div >
          <div class="clearfix padding h-top-title">
            <div class="float-l"><span class="bar-l"></span>快捷入口</div>
            <div class="float-r">
              <el-dropdown trigger="click" @command="handleCommand">
                <span class="el-dropdown-link">
                   <i class="el-icon-more gray"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="edit">编辑</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>

          <div class="tabs-container">
            <div v-if="!nocutment">
              <div class="no-short-menu" @click="addCutMenu">
                <img src="../../../../assets/beneform4j/404/icon_not_hurry.png" alt="">
                <div>可添加快捷入口</div>
              </div>
            </div>
            <div class="tabs-row tabs-row-one clearfix" v-if="nocutment">

              <div v-for="item in tabs1" :key="item.menuId" @click="gotoCutMenu(item)">
                <div class="text-c pointer ">
                  <div class="tabs-icon">
                    <img  :src="'static/cutmenuicon/'+ item.icon" alt="">
                  </div>
                  <div>
                    <span>{{item.menuName}}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="tabs-row tabs-row-two clearfix" v-if="nocutment" >
              <div v-for="item in tabs2" :key="item.menuId" @click="gotoCutMenu(item)">
                <div class="text-c pointer ">
                  <div class="tabs-icon">
                    <img  :src="'static/cutmenuicon/'+ item.icon"  alt="">
                  </div>
                  <div>
                    <span>{{item.menuName}}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 编辑菜单 -->
          <bf-table-edit :width="700" ref="showEdit" :title="'快捷入口编辑'" @formSubmit="formSubmit">
            <div>
              <div class="cut-show-title"><b>已添加入口</b><span class="error">(温馨提示：最多只能添加10个)</span></div>
              <div class="cut-content">
                <div class="bg-color cut-content-item" v-for="item in cutMenus" :key="item.menuId">
                  <span>{{item.menuName}}</span><img @click="deleteItem(item)" src="../../../../assets/beneform4j/icon/home_icon_close.png" alt="">
                </div>
              </div>
              <div class="cut-gap"></div>
              <div class="cut-add-title"><b>点击添加快捷入口</b></div>
              <div class="all-menu-conten">
                <div v-for="item in allMenus" :key="item.id" @click="addMenu(item)">
                  <span>{{item.text}}</span>
                </div>
              </div>
            </div>
          </bf-table-edit>
        </div>
      </div>
</template>

<script>
import { getCurtMenuApi, addCurtMenuApi } from './api'
import { asyncRouterMap } from '@/router'
export default {
  data() {
    return {
      allMenus: [],
      employeeNo: '',
      cutMenus: [

      ],
      tabs1: [],
      tabs2: [],
      nocutment: false,
      activeMenuId: ''
    }
  },
  mounted() {
    // getSessionUserApi().then(response => {
    //   if (response.success) {
    //     if (response.data.userName) {
    //       this.employeeNo = response.data.userName
    //     }
    //   }
    // })
    this.getCurtMenu()
  },
  methods: {
    gotoCutMenu(item) {
      this.activeMenuId = item.menuId
      this.dealRouterTree(asyncRouterMap)
    },
    dealRouterTree(children) {
      children.forEach(v => {
        if (v.id == this.activeMenuId) {
          const routerItem = { ...v }
          this.$router.push(routerItem)
        }
        if (v.children) {
          this.dealRouterTree(v.children)
        }
      })
    },
    getCurtMenu() {
      getCurtMenuApi().then(response => {
        if (response.success) {
          if (response.data) {
            this.cutMenus = response.data
            const len = this.cutMenus.length
            if (len === 0) {
              this.nocutment = false
            } else {
              // console.log('223')
              this.nocutment = true
              this.tabs1 = this.cutMenus.slice(0, 5)
              this.tabs2 = this.cutMenus.slice(5, 10)
            }
          }
        }
      })
    },
    deleteItem(item) {
      this.cutMenus.forEach((v, index) => {
        if (v.menuId == item.menuId) {
          this.cutMenus.splice(index, 1)
          const menuItem = {
            id: item.menuId,
            text: item.menuName
          }
          this.allMenus.push(menuItem)
        }
      })
    },
    addMenu(item) {
      const obj = {
        employeeNo: this.employeeNo,
        menuId: item.id,
        menuName: item.text
      }
      if (this.cutMenus.length == 10) {
        this.$message({
          message: '最多只能添加10个快捷菜单',
          type: 'error'
        })
        return
      }
      this.allMenus.forEach((v, index) => {
        if (v.id === item.id) {
          this.allMenus.splice(index, 1)
        }
      })
      this.cutMenus.push(obj)
    },
    formSubmit() {
      this.addCurtMenu()
    },
    addCurtMenu() {
      const params = {
        listForm: this.cutMenus,
        employeeNo: this.employeeNo
      }
      addCurtMenuApi(params).then(response => {
        if (response.success) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.$refs.showEdit.hidden()
          this.getCurtMenu()
        }
      })
    },
    dealTreeChildren(arr) {
      arr.forEach(v => {
        if (v.leaf) {
          this.allMenus.push(v)
        }
        if (v.children && v.children.length > 0) {
          this.dealTreeChildren(v.children)
        }
      })
    },
    handleCommand(command) {
      if (command === 'edit') {
        this.showEditCut()
      }
    },
    addCutMenu() {
      this.showEditCut()
    },
    showEditCut() {
      this.allMenus = []
      const tmpArr = []
      this.dealTreeChildren(this.$store.state.user.menus)
      this.allMenus.forEach((v, index) => {
        this.cutMenus.forEach(item => {
          if(item.menuId === v.id) {
            // this.allMenus.splice(index, 1)
            tmpArr.unshift(index)
          }
        })
      })
      tmpArr.forEach(v => {
        this.allMenus.splice(v, 1)
      })
      this.$refs.showEdit.show({})
    }
  }
}
</script>

<style scoped>
@import url('../home.css');
.tabs-row>div>div:hover{
  border: 1px solid transparent;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
}
.cut-gap{
  width: 100%;
  height: 1px;
  border-bottom: 1px dotted #e9e9e9;
}
.cut-content{
  height: 100px;
}
.cut-add-title{
  margin-top: 16px;
}
.all-menu-conten{
  margin-top: 16px;
}
.all-menu-conten>div{
  float: left;
  margin-right: 16px;
  margin-bottom: 16px;
  border: 1px dotted #e9e9e9;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  color: #8f8f8f;
}
.all-menu-conten>div:hover{
  border:1px solid #0099ff;
}
.cut-show-title span{
  font-size: 12px;
  margin-left: 10px;
}
.no-short-menu{
  text-align: center;
  margin-top: 77px;
  cursor: pointer;
}
.cut-content{
  margin-top: 16px;
}
.cut-content>div{
  float: left;
  margin-right: 16px;
  margin-bottom: 16px;
  border: 1px solid #fff;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
}
.cut-content-item>img{
  position: relative;
  top: 2px;
  left: 4px;
}
</style>


